<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2016 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: dialog</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="Display dialogs on a map." />
  <meta name="keywords" content="openlayers,control, dialog, overlay, form" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- FontAwesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <link rel="stylesheet" href="../style.css" />
  <style>
    .center {
      text-align: center;
    }
    .alert > form {
      border: 5px dashed #f80;
      background-color: #ff6;
      color: #800;
    }
    .alert > form:before {
      content: '\f071';
      font-family: fontawesome;
      float: left;
      margin: 0 .2em 0 0;
      font-size: 3em;
      margin-top: -.1em;
    }
    .autoclose {
      text-align: center;
      font-size: 1.5em;
    }
    .autoclose span {
      font-size: 2em;
      color: #369;
      vertical-align: sub;
      font-family: sans-serif;
      font-weight: bold;
      padding: 0 .1em;
    }
    .ol-ext-dialog.ol-visible > form {
      overflow: visible;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Dialog</h1>
  </a>
  <div class="info">
    <i>ol/control/Dialog</i> is a convenient vay to display dialog on a map.
    <ul>
      <li>
        Dialog has a dropdown or zoom effect
      </li>
      <li>
        You can add your own buttons, listen to the <i>button</i> event to get the one is clicked.
      </li>
      <li>
        A <i>button</i> event with a <i>sumbit</i> button is fired on submit.
      </li>
      <li>
        A <i>button</i> event with a <i>cancel</i> button is fired on closebox hit.
      </li>
      <li>
        The <i>button</i> event returns a list of inputs based on there classes.
      </li>
      <li>
        Use <i>hideOnClick</i> option to close the dialog when clicking the background.
      </li>
    </ul>
  </div>

  <!-- DIV pour la carte -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options">
    <h2>Options:</h2>
    <ul><li>
      <button onclick="dialog.show({ content: 'Hello World!', title: 'Hello'})">Show dialog Hello World!</button>
    </li><li>
      <button onclick="dialogZoom.show({ content: 'Hello World!', title: 'Hello', buttons:{ ok:'hello', cancel:'nope' }})">Show dialog + zoom effect</button>
    </li><li>
      <button onclick="dialogMap.show('I\'m insde the map!<br/><i>click outside to close</i>')">Show dialog inside map</button>
    </li><li>
      <button onclick="dialogPrompt.show()">Show a prompt dialog...</button>
    </li><li>
      <button onclick="if (!dialogProgress.isOpen()) dialogProgress.show({ progress : 0 })">Show a progress dialog...</button>
    </li><li>
      <button onclick="alert.show('This is an alert!<br/>Nothing goes wrong...')">Show an alert!</button>
    </li><li>
      <button onclick="showAutoClose()">Autoclose dialog</button>
    </li><li>
      <button onclick="dlarg.show({ content: lorem, title: 'Large dialog', closeBox: true, buttons:['ok','cancel'] })">Large dialog</button>
    </li></ul>
    <p>
    </p>
  </div>
  
  <script type="text/javascript">
  // Layers
  var layer = new ol.layer.Geoportail({ layer: 'ORTHOIMAGERY.ORTHOPHOTOS' })

  // The map
  var map = new ol.Map ({
    target: 'map',
    view: new ol.View ({
      zoom: 5,
      center: [166326, 5992663]
    }),
    layers: [layer]
  });

  // Notification
  var notification = new ol.control.Notification({});
  map.addControl(notification);

  // Dialog outside the map
  var dialog = new ol.control.Dialog({ fullscreen: true, closeBox: true });
  map.addControl(dialog);

  // Dialog with zoom option
  var dialogZoom = new ol.control.Dialog({ fullscreen: true, zoom: true, closeBox: true });
  dialogZoom.on('button', function(e) {
    notification.show(e.button)
  });
  map.addControl(dialogZoom);

  // A dialog inside a map
  var dialogMap = new ol.control.Dialog({ hideOnClick: true, className: 'center' });
  map.addControl(dialogMap);

  // Prompt dialog
  var dialogPrompt = new ol.control.Dialog({
    content: 'Enter a value:<br/><input class="value" type="text" placeholder="Enter a value" />',
    title: 'Prompt', 
    buttons:{ submit:'ok', cancel:'cancel' }
  });
  dialogPrompt.on('button', function(e) {
    if (e.button === 'submit') {
      dialogMap.show ('Your enter: "'+e.inputs['value'].value+'"');
    }
  });
  dialogPrompt.on('show', function() {
    dialogMap.close();
  });
  map.addControl(dialogPrompt);

  // Progress dialog
  var dialogProgress = new ol.control.Dialog();
  dialogProgress.setContent({
    content: 'Processing...',
    title: 'Progress', 
    max: 10
  });
  dialogProgress.on('show', function() {
    dialogMap.close();
    function step(i) {
      dialogProgress.setProgress(i);
      if (i<10) {
        setTimeout(function() {
          step(i+1);
        }, 500);
      } else {
        dialogMap.show('End of progress...');
        dialogProgress.hide();
      }
    }
    step(0);
  });
  map.addControl(dialogProgress);


  // Alert
  var alert = new ol.control.Dialog({ className: 'alert', hideOnClick: true, closeBox: true });
  map.addControl(alert);

  // Large dialog
  var aclose = new ol.control.Dialog({ className: "autoclose", fullscreen: true, zoom: true, closeBox: true });
  map.addControl(aclose);
  function showAutoClose() {
    var delay = 5;
    var content = document.createElement('DIV');
    content.innerHTML = 'The dialog will close <br/> in <span></span> s.';
    var dspan = content.querySelector('SPAN');
    aclose.show({ content: content, autoclose: delay * 1000 });
    function setTime(d) {
      dspan.innerText = d--;
      if (d>0) setTimeout(function() { setTime(d); }, 1000);
    }
    setTime(delay);
  }

  // Large dialog
  var dlarg = new ol.control.Dialog({ fullscreen: true, zoom: true, closeBox: true });
  map.addControl(dlarg);
  var lorem = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis massa leo. Sed tempor tristique ligula non tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget varius urna. Maecenas dapibus, metus vitae pellentesque gravida, dolor nisi vehicula arcu, vel tincidunt metus arcu tincidunt lectus. Praesent id auctor risus. Nam id molestie tellus, id aliquam ante. Proin imperdiet, velit sed aliquet tempor, libero felis lobortis nisl, vel pretium purus lectus ut velit. Pellentesque vitae luctus mauris. Suspendisse eros magna, vulputate eu ornare id, dictum at mi. Etiam et viverra erat. Maecenas sed elementum lorem, eget posuere quam.</p>";
  lorem = lorem+lorem+lorem+lorem+lorem+lorem+lorem+lorem+lorem+lorem;


  </script>
  
</body>
</html>